<template>
  <div class="rightTop2">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="chart" id="ledtMiddlechart2"></div>
  </div>
</template>
<script>
export default {
  name: "RightTop2",
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    select() {},
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    var myChart = this.$echarts.init(
      document.getElementById("ledtMiddlechart2")
    );
    const option = {
      tooltip: {
        trigger: "axis",
        textStyle: {
          fontSize: 20,
        },
      },
      legend: {
        textStyle: {
          color: "#fff",
          fontSize: 20,
        },
        itemWidth: 14,
        itemHeight: 8,
        icon: "path://M3,3 C5.14219539,3 6.89107888,4.68396847 6.99510469,6.80035966 L7,7 C7,8.1045695 7.8954305,9 9,9 C10.0543618,9 10.9181651,8.18412221 10.9945143,7.14926234 L11,7 L13,7 C13,9.209139 11.209139,11 9,11 C6.790861,11 5,9.209139 5,7 C5,5.8954305 4.1045695,5 3,5 C1.9456382,5 1.08183488,5.81587779 1.00548574,6.85073766 L1,7 L-1,7 C-1,4.790861 0.790861001,3 3,3 Z",
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
              width: 2,
            },
          },
          axisTick: {
            show: false,
            label: {
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 20,
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          name: "m³/h",
          type: "value",
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 18,
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 18,
          },
        },
      ],
      series: [
        {
          name: "进水口流量",
          type: "line",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          symbol: "none",
          smooth: true,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#FAE67A" },
              { offset: 1, color: "#18c19600" },
            ]),
          },
          data: [112.0, 124.9, 117.0, 123.2, 125.6, 176.7, 135.6],
        },
        {
          name: "出水口流量",
          type: "line",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          symbol: "none",
          smooth: true,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#3094FB" },
              { offset: 1, color: "#18c19600" },
            ]),
          },
          data: [122.6, 155.9, 169.0, 126.4, 128.7, 170.7, 175.6],
        },
      ],
    };

    // 绘制图表
    myChart.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightTop2 {
  margin-top: 70px;
  position: relative;

  .chart {
    margin: 40px 0 0px;
    width: 100%;
    height: 420px;
  }
}
</style>
